html, body { height: 100%; width: 100%; margin: 0; padding: 0; background-color: #fff; overflow: hidden; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, menu, button { margin: 0; padding: 0; }
fieldset, img { border: 0 }
ol, ul { list-style: none }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 }
.clearfix:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 }
.wrapper, .page-list{ position: relative; height: 100%; }
.page{}
.page-inner { width: 100%; height: 100%; }
.ele { position: absolute; z-index: 0; }
.ele img { width: 100%; }
.ele.elebg{top:0;}
.ele.elebg img{max-height:1920px;}
.ele.eletitle{width: 88.6%; left: 5.7%; top: 1.8%;}
.ele.eletitle img{max-height: 57px;}
.ele.eleplat{width: 95.8%; left: 2.1%; top: 16.7%;}
.ele.eleplat img{ max-height: 154px;}
.ele.elename{width: 68.5%; left: 15.75%; top: 9.37%;}
.ele.elename img{ max-height: 85px;}
.ele.elerole{ width: 51%; left: 29.4%; bottom: 16.2%;}
.ele.elerole img{max-height: 807px;}
.ele.elelog1{width:59%; left: 20.6%; top: 25%;}
.ele.elelog1 img{max-height: 220px;}
.ele.elebot{width: 92.6%; left: 3.7%; bottom:8.4%;}
.ele.elebot img{ max-height: 137px;}
.ele.elefoot{width: 20%; left: 40%; bottom: 3%;}
.ele.elefoot img{max-height: 74px;}
.ele.elelog2{width: 52%; left: 17%; top: 24.8%;}
.ele.elelog2 img{max-height: 451px;}
.ele.eletag{width: 29.1%; left: 17.6%; bottom: 32%;}
.ele.eletag img{max-height: 216px;}

.item:after {
	content:" ";
	position:absolute;
	width:1.2rem;
	height:.9rem;
	margin:0 auto;
	left:0;
	right:0;
	bottom:.5rem;
	background:url(../images/web-swipe-tip.png) no-repeat;
	background-size:100% 100%;
	-webkit-animation:webSwipeTipAfter 1.5s infinite ease-in-out;
	animation:webSwipeTipAfter 1.5s infinite ease-in-out;
	z-index:100
}
.item.noSwitch:after {
	display:none
}
.item:last-child:after {
	display:none
}
.item[data-loop]:last-child:after {
	display:block
}
@-webkit-keyframes webSwipeTipAfter {
	0% {
		opacity:1;
		filter:alpha(opacity=100)
	}
	100% {
		opacity:0;
		filter:alpha(opacity=0);
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0)
	}
}
@keyframes webSwipeTipAfter {
	0% {
		opacity:1;
		filter:alpha(opacity=100)
	}
	100% {
		opacity:0;
		filter:alpha(opacity=0);
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0)
	}
}


#page-inner-2 .elename{width: 64.6%; left: 17.7%;}
#page-inner-2 .elerole{width:60%; left:25.4%;}
#page-inner-2 .elerole img{max-height:674px;}
#page-inner-2 .elelog1{width: 64.6%; left: 17.7%; top:27.6%;}
#page-inner-2 .elelog2{width: 55.3%; left: 27.5%; top:25%;}
#page-inner-2 .elelog2 img{max-height: 392px;}
#page-inner-2 .eletag{left:12.8%; bottom:35%;}

#page-inner-3 .elename{width: 72.4%; left: 13.8%;}
#page-inner-3 .elerole{width:52.87%; left:29%;}
#page-inner-3 .elerole img{max-height:736px;}
#page-inner-3 .elelog1{width: 58.8%; left: 19.26%; top:25.78%;}
#page-inner-3 .elelog2{width: 60.37%; left: 13.26%; top:25.2%;}
#page-inner-3 .elelog2 img{max-height: 387px;}
#page-inner-3 .eletag{left:12.8%; bottom:35%;}

#page-inner-4 .elename{width: 72.4%; left: 13.8%;}
#page-inner-4 .elerole{width:77.5%; left:12.8%;}
#page-inner-4 .elerole img{max-height:800px;}
#page-inner-4 .elelog1{width: 72.4%; left: 12.8%; top:26%;}

#page-inner-5 .eleplat{top:25.42%;}
#page-inner-5 .eleact{width:60.9%; left:19.55%; top:11.98%;}
#page-inner-5 .eleact img{max-height:187px;}
#page-inner-5 .eledata{width:84.26%; left:7.87%; top:36.98%;}
#page-inner-5 .eledata img{max-height:652px;}
#page-inner-5 .eletxt{width:44%; left:28%; bottom:18%;}
#page-inner-5 .eletxt img{max-height:67px;}       			
#page-inner-5 .eleqr{width:20%; left:40%; bottom:3%;}
#page-inner-5 .img{max-height:330px;}

.slide-progress { position: absolute; z-index: 102; width:.5rem; top: 50%; right:.25rem; overflow: hidden }
.vertical.slide-progress { right: 10px; top: 50%; }
.horizontal.slide-progress { left: 50%; bottom: 10px; }
.slide-progress li { list-style: none; padding: 0; background-color: #f9f9f9; width:.3rem; height:.3rem; border-radius:.3rem; opacity: .3; filter: alpha(opacity=30); margin:0 auto .3rem}
.slide-progress li.active { opacity: .7; filter: alpha(opacity=70); width:.3rem; height:.3rem;background-color: transparent; border: 1px solid #fff }

#page-1{background-color: #d6eaea;}
#page-2{background-color:#f1e4cf;}
#page-3{background-color:#efe4e4;}
#page-4{background-color:#f5f6ed;}
#page-5{background-color:#fff8f8;}

#page-inner-1{background: url(../images/bg1.png) top center no-repeat; background-size:100% 100%;}
#page-inner-2{background: url(../images/bg2.png) top center no-repeat; background-size:100% 100%;}
#page-inner-3{background: url(../images/bg3.png) top center no-repeat; background-size:100% 100%;}
#page-inner-4{background: url(../images/bg4.png) top center no-repeat; background-size:100% 100%;}
#page-inner-5{background: url(../images/bg5.png) top center no-repeat; background-size:100% 100%;}


#page-1.active #page-inner-1{-webkit-animation:zoomOut 1s 1 both; -moz-animation:zoomOut 1s 1 both; animation:zoomOut 1s 1 both;}
#page-1.active .eletitle{-webkit-animation: slideDown 1s 1.1s 1 both; -moz-animation: slideDown 1s 1.1s 1 both; animation: slideDown 1s 1.1s 1 both;}
#page-1.active .eleplat{-webkit-animation: zoomIn 1s 1s 1 both; -moz-animation: zoomIn 1s 1s 1 both; animation: zoomIn 1s 1s 1 both;}
#page-1.active .elename{-webkit-animation:bounceOut 1s 1.5s 1 both; -moz-animation:bounceOut 1s 1.5s 1 both; animation:bounceOut 1s 1.5s 1 both;}
#page-1.active .elerole{-webkit-animation: bounceIn 1s 1.5s 1 both; -moz-animation: bounceIn 1s 1.5s 1 both; animation: bounceIn 1s 1.5s 1 both;}
#page-1.active .elelog1{-webkit-animation: slideRight 1s 1.6s 1 both, fadeOut 1s 6s 1 both; -moz-animation: slideRight 1s 6s 1 both, fadeOut 1s 6s 1 both; animation: slideRight 1s 1.6s 1 both, fadeOut 1s 6s 1 both;}
#page-1.active .elebot{-webkit-animation: bounceOut 1s 8s 1 both; -moz-animation: bounceOut 1s 8s 1 both; animation: bounceOut 1s 8s 1 both;}
#page-1.active .elefoot{-webkit-animation: zoomIn 1s 1.2s 1 both; -moz-animation: zoomIn 1s 1.2s 1 both; animation: zoomIn 1s 1.2s 1 both;}
#page-1.active .elelog2{-webkit-animation: fadeIn 0.5s 6.6s 1 both; -moz-animation: fadeIn 0.5s 6.6s 1 both; animation: fadeIn 0.5s 6.6s 1 both;}
#page-1.active .eletag{-webkit-animation: bounceIn 1s 8s 1 both; -moz-animation: bounceIn 1s 8s 1 both; animation: bounceIn 1s 8s 1 both;}

#page-2.active #page-inner-2{-webkit-animation:zoomOut 1s 1 both; -moz-animation:zoomOut 1s 1 both; animation:zoomOut 1s 1 both;}
#page-2.active .eletitle{-webkit-animation: slideDown 1s 1.1s 1 both; -moz-animation: slideDown 1s 1.1s 1 both; animation: slideDown 1s 1.1s 1 both;}
#page-2.active .eleplat{-webkit-animation: zoomIn 1s 1s 1 both; -moz-animation: zoomIn 1s 1s 1 both; animation: zoomIn 1s 1s 1 both;}
#page-2.active .elename{-webkit-animation:bounceOut 1s 1.5s 1 both; -moz-animation:bounceOut 1s 1.5s 1 both; animation:bounceOut 1s 1.5s 1 both;}
#page-2.active .elerole{-webkit-animation: bounceIn 1s 1.5s 1 both; -moz-animation: bounceIn 1s 1.5s 1 both; animation: bounceIn 1s 1.5s 1 both;}
#page-2.active .elelog1{-webkit-animation: slideRight 1s 1.6s 1 both, fadeOut 1s 6s 1 both; -moz-animation: slideRight 1s 6s 1 both, fadeOut 1s 6s 1 both; animation: slideRight 1s 1.6s 1 both, fadeOut 1s 6s 1 both;}
#page-2.active .elebot{-webkit-animation: bounceOut 1s 8s 1 both; -moz-animation: bounceOut 1s 8s 1 both; animation: bounceOut 1s 8s 1 both;}
#page-2.active .elefoot{-webkit-animation: zoomIn 1s 1.2s 1 both; -moz-animation: zoomIn 1s 1.2s 1 both; animation: zoomIn 1s 1.2s 1 both;}
#page-2.active .elelog2{-webkit-animation: fadeIn 0.5s 6.6s 1 both; -moz-animation: fadeIn 0.5s 6.6s 1 both; animation: fadeIn 0.5s 6.6s 1 both;}
#page-2.active .eletag{-webkit-animation: bounceIn 1s 8s 1 both; -moz-animation: bounceIn 1s 8s 1 both; animation: bounceIn 1s 8s 1 both;}

#page-3.active #page-inner-3{-webkit-animation:zoomOut 1s 1 both; -moz-animation:zoomOut 1s 1 both; animation:zoomOut 1s 1 both;}
#page-3.active .eletitle{-webkit-animation: slideDown 1s 1.1s 1 both; -moz-animation: slideDown 1s 1.1s 1 both; animation: slideDown 1s 1.1s 1 both;}
#page-3.active .eleplat{-webkit-animation: zoomIn 1s 1s 1 both; -moz-animation: zoomIn 1s 1s 1 both; animation: zoomIn 1s 1s 1 both;}
#page-3.active .elename{-webkit-animation:bounceOut 1s 1.5s 1 both; -moz-animation:bounceOut 1s 1.5s 1 both; animation:bounceOut 1s 1.5s 1 both;}
#page-3.active .elerole{-webkit-animation: bounceIn 1s 1.5s 1 both; -moz-animation: bounceIn 1s 1.5s 1 both; animation: bounceIn 1s 1.5s 1 both;}
#page-3.active .elelog1{-webkit-animation: slideRight 1s 1.6s 1 both, fadeOut 1s 6s 1 both; -moz-animation: slideRight 1s 6s 1 both, fadeOut 1s 6s 1 both; animation: slideRight 1s 1.6s 1 both, fadeOut 1s 6s 1 both;}
#page-3.active .elebot{-webkit-animation: bounceOut 1s 8s 1 both; -moz-animation: bounceOut 1s 8s 1 both; animation: bounceOut 1s 8s 1 both;}
#page-3.active .elefoot{-webkit-animation: zoomIn 1s 1.2s 1 both; -moz-animation: zoomIn 1s 1.2s 1 both; animation: zoomIn 1s 1.2s 1 both;}
#page-3.active .elelog2{-webkit-animation: fadeIn 0.5s 6.6s 1 both; -moz-animation: fadeIn 0.5s 6.6s 1 both; animation: fadeIn 0.5s 6.6s 1 both;}
#page-3.active .eletag{-webkit-animation: bounceIn 1s 8s 1 both; -moz-animation: bounceIn 1s 8s 1 both; animation: bounceIn 1s 8s 1 both;}

#page-4.active #page-inner-4{-webkit-animation:zoomOut 1s 1 both; -moz-animation:zoomOut 1s 1 both; animation:zoomOut 1s 1 both;}
#page-4.active .eletitle{-webkit-animation: slideDown 1s 1.1s 1 both; -moz-animation: slideDown 1s 1.1s 1 both; animation: slideDown 1s 1.1s 1 both;}
#page-4.active .eleplat{-webkit-animation: zoomIn 1s 1s 1 both; -moz-animation: zoomIn 1s 1s 1 both; animation: zoomIn 1s 1s 1 both;}
#page-4.active .elename{-webkit-animation:bounceOut 1s 1.5s 1 both; -moz-animation:bounceOut 1s 1.5s 1 both; animation:bounceOut 1s 1.5s 1 both;}
#page-4.active .elerole{-webkit-animation: bounceIn 1s 1.5s 1 both; -moz-animation: bounceIn 1s 1.5s 1 both; animation: bounceIn 1s 1.5s 1 both;}
#page-4.active .elelog1{-webkit-animation: slideRight 1s 1.6s 1 both; -moz-animation: slideRight 1s 6s 1 both; animation: slideRight 1s 1.6s 1 both}
#page-4.active .elebot{-webkit-animation: bounceOut 1s 3s 1 both; -moz-animation: bounceOut 1s 3s 1 both; animation: bounceOut 1s 3s 1 both;}
#page-4.active .elefoot{-webkit-animation: zoomIn 1s 1.2s 1 both; -moz-animation: zoomIn 1s 1.2s 1 both; animation: zoomIn 1s 1.2s 1 both;}

#page-5.active #page-inner-5{-webkit-animation:zoomOut 1s 1 both; -moz-animation:zoomOut 1s 1 both; animation:zoomOut 1s 1 both;}
#page-5.active .eletitle{-webkit-animation: slideDown 1s 1.1s 1 both; -moz-animation: slideDown 1s 1.1s 1 both; animation: slideDown 1s 1.1s 1 both;}
#page-5.active .eleplat{-webkit-animation: zoomIn 1s 1s 1 both; -moz-animation: zoomIn 1s 1s 1 both; animation: zoomIn 1s 1s 1 both;}
#page-5.active .eleact{-webkit-animation:bounceOut 1s 1.5s 1 both; -moz-animation:bounceOut 1s 1.5s 1 both; animation:bounceOut 1s 1.5s 1 both;}
#page-5.active .eledata{-webkit-animation: bounceIn 1s 1.5s 1 both; -moz-animation: bounceIn 1s 1.5s 1 both; animation: bounceIn 1s 1.5s 1 both;}
#page-5.active .eletxt{-webkit-animation: bounceOut 1s 1s 1 both; -moz-animation: bounceOut 1s 1s 1 both; animation: bounceOut 1s 1s 1 both;}
#page-5.active .eleqr{-webkit-animation: zoomIn 1s 1.2s 1 both; -moz-animation: zoomIn 1s 1.2s 1 both; animation: zoomIn 1s 1.2s 1 both;}

